<template>
  <div class="broadnetCard">
    <div class="broadnetCardTitle">选取号码</div>
    <van-cell-group :border="false" inset class="t-l" >
      <van-field :border="false" v-model="name" label="姓名" placeholder="请输入姓名" input-align="right" />
      <van-field :border="false" v-model="mobile" type="tel" label="联系电话" placeholder="请输入联系电话" input-align="right" />
      <van-field :border="false" v-model="identity_card" label="身份证号码" placeholder="请输入身份证号码" input-align="right" />
      <van-cell :border="false" title="所在地区" is-link :value="selectedOptions ? selectedOptions.areaByname : '请选择所在地区'" @click="showTap" />
      <van-field :border="false" v-model="address" label="详细地址" placeholder="请输入详细地址" input-align="right" />
      <van-cell :border="false" title="选号" is-link :value="choose_phone_number?choose_phone_number:'请选择号码'" @click="showNumberTap" />
    </van-cell-group>

    <van-popup v-model="show" round position="bottom" :close-on-click-overlay="false">
      <van-cascader :closeable="false" v-model="cascaderValue" :field-names="fieldNames" title="请选择所在地区" :options="optiopns"
      @close="show = false" @finish="onFinish" active-color="var(--themeBaseColor)"/>
    </van-popup>

    <van-popup v-model="showNumber" class="pop-base-class" position="bottom" round style="background-color: #ffffff;" closeable>
      <div class="pop-base-title">选择号码</div>
      <van-search @search="getNumber" v-model="fuzzyKey" placeholder="搜索号码" shape="round" />
      <div class="btn" @click="getNumber">换一批</div>
      <div class="pop-base-content">
        <div class="numberBox">
          <div class="cardNumBox">
            <div v-if="numberList && numberList.length <= 0" class="cardNumBox_txt">该地区暂无号码</div>
            <div class="numLis" v-for="(item, index) in numberList" :key="index" :style="[ActiveHigthLine(item)]" @click="tapSelect(item.accessNum)">{{ item.accessNum }}</div>
          </div>
        </div>
      </div>
      <div class="pop-base-bottom flex" @click="showNumberConfirm">
        <van-button round type="danger" block color="var(--themeBaseColor)" style="height: 40px;">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Cascader } from "vant";
Vue.use(Cascader);

export default {
  data() {
    return {
      name: "",
      mobile: "",
      identity_card: "", //身份证号
      province_name: "",
      city_name: "",
      district_name: "",
      region_id: "", //区编号
      province_id: "",
      city_id: "",
      address: "",
      choose_phone_number: "", //选号
      fuzzyKey: "",
      cascaderValue: "",
      show: false,
      optiopns: broadnetData,
      fieldNames: {
        text: "areaName",
        value: "id",
        children: "children"
      },
      selectedOptions: null,
      showNumber: false,
      numberList: []
    };
  },
  mounted() {
    console.log(broadnetData);
  },
  computed: {
    ActiveHigthLine(item) {
      return function(item) {
        console.log(item);
        if (item.accessNum == this.choose_phone_number) {
          return {
            background: "var(--themeBaseColor)",
            color: "#fff",
            border: "1px solid #fff"
          };
        }
      };
    }
  },
  methods: {
    showTap() {
      this.cascaderValue = null;
      this.show = true;
    },
    is_valid(val, msg, data = null) {
      return {
        val,
        msg,
        data
      };
    },
    postData() {
      // 父组件调用ref取得子组件的组装值
      if (this.fun.isTextEmpty(this.name)) {
        return this.is_valid(false, "请输入姓名");
      }
      if (this.fun.isTextEmpty(this.mobile)) {
        return this.is_valid(false, "请输入手机");
      }
      if (this.fun.isTextEmpty(this.identity_card)) {
        return this.is_valid(false, "请输入身份证号码");
      }
      if (this.fun.isTextEmpty(this.region_id)) {
        return this.is_valid(false, "请选择地区");
      }
      if (this.fun.isTextEmpty(this.address)) {
        return this.is_valid(false, "请输入详细地址");
      }
      if (this.fun.isTextEmpty(this.choose_phone_number)) {
        return this.is_valid(false, "请选择号码");
      }
      let broadnet_card_info = {
        name: this.name,
        mobile: this.mobile,
        identity_card: this.identity_card,
        province_name: this.province_name,
        city_name: this.city_name,
        district_name: this.district_name,
        province_id: this.province_id,
        city_id: this.city_id,
        region_id: this.region_id,
        address: this.address,
        choose_phone_number: this.choose_phone_number
      };
      return this.is_valid(true, "", broadnet_card_info);
    },
    onFinish(e) {
      this.selectedOptions = e.selectedOptions[2];
      this.province_name = e.selectedOptions[0].areaName;
      this.city_name = e.selectedOptions[1].areaName;
      this.district_name = e.selectedOptions[2].areaName;

      this.region_id = e.selectedOptions[2].areaCode;
      this.province_id = e.selectedOptions[0].areaCode;
      this.city_id = e.selectedOptions[1].areaCode;
      this.show = false;
      if(this.choose_phone_number){
        this.choose_phone_number = "";
      }
    },
    showNumberTap() {
      this.getNumber();
    },
    showNumberConfirm() {
      this.showNumber = false;
    },
    tapSelect(num) {
      this.choose_phone_number = num;
    },
    async getNumber() {
      let json = { requestParam: { code: this.city_id } };
      if (this.fuzzyKey) {
        json.requestParam.fuzzyKey = this.fuzzyKey;
      }
      let { data, msg, result } = await $http.post("plugin.broadnet-card.frontend.pre-order.get-number", json, "");
      if (result) {
        this.numberList = data.numList;
        if (!this.showNumber) {
          this.showNumber = true;
        }
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.margin-top-10{
  margin-top: 0.625rem!important;
}
.pop-base-class {
  .pop-base-title {
    margin: 18px 12px 12px;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
  }
  .pop-base-content {
    min-height: 45vh;
    max-height: 55vh;
    overflow: scroll;
    padding: 0 0.75rem 5rem;
  }
  .pop-base-bottom {
    padding: 0.625rem 0.875rem;
    background: #ffffff;
  }
}

.broadnetCard {
  .btn {
    margin: 0 0.875rem;
    border-radius: 0.9rem;
    background: var(--themeBaseColor);
    overflow: hidden;
    color: #fff;
    text-align: center;
    line-height: 2rem;
  }
  .broadnetCardTitle {
    text-align: left;
    padding: 0.5rem;
    padding-left: 0.85rem;
    font-size: 1rem;
    font-weight: bold;
  }
  .numberBox {
    box-sizing: border-box;

    .cardNumBox {
      display: flex;
      flex-wrap: wrap;
      margin-top: 1rem;
      justify-content: space-between;
      .cardNumBox_txt {
        text-align: center;
        margin-bottom: 1rem;
        width: 100%;
        color: #999;
      }
      .numLis {
        padding: 0.2rem 0.35rem;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
        border-radius: 0.25rem;
        // margin-right: 0.5rem;
        margin-bottom: 0.5rem;
      }
      .numLis:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>
